<template>
    <div class="main">
        <header class="header">
            <p class="title">请上传一张图片</p>
        </header>
        <div class="content">
            <div class="uploadImageButton commonButton" v-show="!imageUploaded" @click="UploadImage">
                <p>点击此处上传图片</p>
            </div>
            <div class="imageDisplayArea" v-show="imageUploaded">
                <div class="uploadImageButtonDone commonButton" @click="UploadImage">
                   <p>点击此处上传图片</p>
                </div>
                <div class="imageDisplayContent">
                    <canvas ref="canvas"></canvas>
                    <div class="imageSetting" v-show="(!tinyButtonShow) || optionsShow">
                        <image-setting ref="_imageSetting"></image-setting>
                    </div>
                    <div :class="`tinyButton ${tinyButtonStyle}`" v-show="tinyButtonShow" @click="ClickTinyButton"></div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <p>基本信息：{{documentSize.width}} {{documentSize.height}}</p>
        </footer>
    </div>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {UUID} from "@/typescript/utils/UUID.js";
import {GetImageFromFile} from "@/typescript/utils/image/GetImageFromFile.js";
import {ImageAndShapeViewer} from "@/typescript/utils/ImageAndShapeViewer/ImageAndShapeViewer.js";
import {resizeCanvas} from "@/typescript/utils/canvasOperation/resizeCanvas.js";
import {SleepThread} from "@/typescript/utils/thread/SleepThread.js";
import {store} from "@/store.js";
import ImageSetting from "@/components/imageSetting.vue";
import {WebSocketManager} from "@/typescript/utils/connection/WebSocketManager.js";

const imageUploaded = ref(false);
const canvas = ref();
const imageViewer = ref(undefined);
const _imageSetting = ref();
const documentSize = ref({width: 100, height: 100});
const optionsShow = ref(false);

let tinyButtonStyles = ['tinyButtonRight', 'tinyButtonLeft'];
let tinyButtonCount = 0;
let tinyButtonStyle = ref('tinyButtonRight');

let tinyButtonShow = computed(() => {
    console.log('tinyButtonShow', (!tinyButtonShow.value) || optionsShow.value);
    return documentSize.value.width < 1024;
});

/** 单击小按钮 */
let ClickTinyButton = () => {
    tinyButtonCount++;
    tinyButtonCount %= tinyButtonStyles.length;
    tinyButtonStyle.value = tinyButtonStyles[tinyButtonCount];
    optionsShow.value = tinyButtonCount === 1;
}

/** 新建一个套接字 */
const StartWebsocket = async () => {
    if (store.socketManager === undefined) {
        store.socketManager = new WebSocketManager();
        await store.socketManager.StartWebSocket(`font/uploadImage/${UUID()}`, location.hostname, 8000);
    }
}

/** 上传影像 */
const UploadImage = async () => {
    _imageSetting.value.SetSpinBoxState(true);
    let image2 = await GetImageFromFile();

    imageUploaded.value = true;
    await SleepThread(0);
    resizeCanvas(canvas.value, window.devicePixelRatio);

    if (imageViewer.value === undefined) {
        imageViewer.value = new ImageAndShapeViewer();
        imageViewer.value.canvas = canvas.value;
        store.imageViewer = imageViewer.value;
    }

    imageViewer.value.Render(image2);

    await StartWebsocket();
    let imageContent = JSON.stringify({id: 'imageToText', src: image2.src});
    let result0 = await store.socketManager.SendTextToWebSocket(imageContent);
    console.log(`文件读取完毕 ${result0}`);
    _imageSetting.value.recognizedText = result0;
    _imageSetting.value.SetSpinBoxState(false);
}

let ResizeWindow = () => {
    console.log("ResizeWindow");
    documentSize.value.width = window.innerWidth;
    documentSize.value.height = window.innerHeight;
    if (store.imageViewer !== undefined) {
        resizeCanvas(canvas.value, window.devicePixelRatio);
        store.imageViewer.RedrawImage();
    }
}

onMounted(() => {
    ResizeWindow();
    window.onresize = () => {
        ResizeWindow();
    }
});
</script>

<style lang="less" scoped>
@import '../../styles/buttonStyles.less';
.main {
    width: 100%; height: 100%;
    background: radial-gradient(#FFFFFF, #cae5f4);
    & p {
        user-select: none;
        margin: 0; padding: 0;
    }
    & > .header {
        height: 3rem;
        background: linear-gradient(90deg, #DDD, #FFF);
        display: flex;
        align-items: center;

        & > .title {
            font-family: 方正魏碑_GBK;
            color: orangered;
            font-size: 2rem;
            margin-left: 1rem;
        }
    }

    & > .content {
        height: calc(100% - 7rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        & .uploadImageButton, & .uploadImageButtonDone {
            width: 15rem;
            height: 10rem;
            border-radius: 1rem;
            border-style: none;
            background: linear-gradient(lightgreen, darkgreen);
            transition: all .3s;


            &:hover {
                background: linear-gradient(darkgreen, lightgreen);
            }
            display: flex;
            align-items: center;
            justify-content: center;

            & > p {
                color: white;
            }
        }

        & .uploadImageButtonDone {
            width: 100%; height: 2.2rem;
        }

        & > .imageDisplayArea {
            width: 100%;
            height: 100%;
            background: lightcyan;

            & > .imageDisplayContent {
                width: 100%;
                height: calc(100% - 2.2rem);
                position: relative;
                display: flex;

                @media screen and (max-width: 1023px) {
                    & > canvas {
                        width: 100%; height: 100%;
                        position: absolute; left: 0; top: 0;
                    }

                    & > .imageSetting {
                        width: 100%; height: 100%;
                        position: absolute; left: 0; top: 0;
                    }

                    & > .tinyButton {
                        width: 1rem; height: 3rem;
                        background: linear-gradient(aliceblue, lightblue);
                        position: absolute;
                        top: calc(50% - 0.5rem); //left: 0;
                        border: 1px solid black;
                    }

                    & > .tinyButtonRight {
                        right: 0;
                        border-top-left-radius: 0.5rem;
                        border-bottom-left-radius: 0.5rem;
                    }

                    & > .tinyButtonLeft {
                        left: 0;
                        border-top-right-radius: 0.5rem;
                        border-bottom-right-radius: 0.5rem;
                    }
                }

                @media screen and (min-width: 1024px) {
                    & > canvas {
                        width: calc(100% - 30rem); height: 100%;
                    }

                    & > .imageSetting {
                        width: 30rem; height: 100%;
                    }
                }
            }
        }

    }

    & > .footer {
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>